<!DOCTYPE html>
<html>
  <head>
    <title>HTML &lt;&gt; Figma</title>
    <script src="js/popup.js"></script>
    <style>
      body {
        min-width: 340px;
        min-height: 210px;
        background-color: #f8f8f8
      }

      /* Loading animation */
      .lds-ellipsis {
        display: inline-block;
        margin: auto;
        position: relative;
        width: 64px;
        height: 48px;
        background-color: rgb(28, 151, 204);
      }
      .lds-ellipsis div {
        position: absolute;
        top: 27px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
      }
      .lds-ellipsis div:nth-child(1) {
        left: 6px;
        animation: lds-ellipsis1 0.6s infinite;
      }
      .lds-ellipsis div:nth-child(2) {
        left: 6px;
        animation: lds-ellipsis2 0.6s infinite;
      }
      .lds-ellipsis div:nth-child(3) {
        left: 26px;
        animation: lds-ellipsis2 0.6s infinite;
      }
      .lds-ellipsis div:nth-child(4) {
        left: 45px;
        animation: lds-ellipsis3 0.6s infinite;
      }
      @keyframes lds-ellipsis1 {
        0% {
          transform: scale(0);
        }
        100% {
          transform: scale(1);
        }
      }
      @keyframes lds-ellipsis3 {
        0% {
          transform: scale(1);
        }
        100% {
          transform: scale(0);
        }
      }
      @keyframes lds-ellipsis2 {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(19px, 0);
        }
      }

    </style>
  </head>

  <body>
    <div id="popup">
        <div style="margin: 0 auto" class="lds-ellipsis">
            <div /> <div /> <div /><div />
        </div>
    </div>
  </body>
</html>
